<template>
  <div
    class="basic-button"
    @click="$emit('click')"
    :class="[(fillFlag ? 'fill' : '') + buttonColor + '-button']"
  >
    <router-link :to="link">
      <span
        ><i v-if="icon" style="margin-right:10px;" :class="icon"></i
        >{{ name }}</span
      >
    </router-link>
  </div>
</template>

<script>
export default {
  name: "ButtonItem",
  props: {
    name: String,
    icon: String,
    link: String,
    buttonColor: String,
    fillFlag: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.basic-button {
  width: fit-content;
  min-width: 90px;
  padding: 0 10px;
  height: 27px;
  line-height: 26px;
  border-radius: 6px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-align: center;
  margin-right: 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.orange-button {
  color: rgb(245, 134, 106);
  border: 1px solid rgb(245, 134, 106);
  background: rgb(254, 237, 226);
}
.fillorange-button {
  color: white;
  border: 1px solid rgb(245, 134, 106);
  background: rgb(245, 134, 106);
}

.blue-button {
  color: rgb(123, 188, 248);
  border: 1px solid rgb(123, 188, 248);
  background: rgb(237, 246, 253);
}
.fillblue-button {
  color: white;
  border: 1px solid rgb(123, 188, 248);
  background: rgb(123, 188, 248);
}

.deepblue-button {
  color: #004ca7;
  border: 1px solid #004ca7;
  background: #edf2f9;
}
.filldeepblue-button {
  color: white;
  border: 1px solid #004ca7;
  background: #004ca7;
}
.purple-button {
  color: rgb(94, 54, 235);
  border: 1px solid rgb(94, 54, 235);
  background: rgb(235, 228, 254);
}
.fillpurple-button {
  color: white;
  border: 1px solid rgb(94, 54, 235);
  background: rgb(94, 54, 235);
}
.red-button {
  color: #ff3819;
  border: 1px solid #ff3819;
  background: #ffefef;
}
.green-button {
  color: #02c86c;
  border: 1px solid #02c86c;
  background: #dfffef;
}
.yellow-button {
  color: #f3b815;
  border: 1px solid #f3b815;
  background: #fff6ef;
}
</style>
